<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Ajax.js"></script>
    <script src="./pagination.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* column-count: 4; */
            /* column-gap: 20px; */
            /* height: 1000px; */
        }

        .box ul {
            float: left;
            margin: 0px 20px 10px 0px;
        }

        li {
            list-style: none;
            width: 200px;
            border: 1px solid;
            margin-bottom: 10px;
        }

        .box li img {
            width: 200px;
        }

        button {
            position: fixed;
            top: 100px;
            right: 200px;
        }

        .box1 {
            /* position: fixed;
            top: 100px;
            right: 200px; */
        }

        .box2 {
            width: 1000px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <!-- <li>
        <img src="" alt="">
        <p></p>
        </li> -->
    </div>


    <button>点击</button>
    <script>
        let idx = 1;
        let box = document.querySelector('.box');
        let uls = document.querySelectorAll('.box ul');
        let btn = document.querySelector('button');
        let box1 = document.querySelector('.box1');
        async function getDate() {

            let res1 = await pAjax({
                url: '../5.5fenye.php',
                data: {
                    index: idx,
                    len: 20,
                },
            });
            // 转化为js数据类型
            res1 = JSON.parse(res1);
            // console.log(res1);
            Runder(res1.list);

        }
        getDate();

        btn.onclick = function () {
            uls.forEach(item => {
                item.innerHTML = '';
            });
            
            idx++;
            getDate();
        }

        new Pagination(box1);

        function Runder(data) {
            data.forEach(item => {
                let str = '';
                let min = uls[0];
                for (let i = 0; i < uls.length; i++) {
                    if (uls[i].offsetHeight < min.offsetHeight) {
                        min = uls[i];
                    }
                };
                str += `
            <li>
            <img src="${item.goods_big_logo}" alt="">
            <p>${item.goods_name}</p>
            </li>
            `;
                min.innerHTML += str;

                //     let max= uls[0];
                //     for (let j = 0; j < uls.length; j++) {
                //         if(max.offsetHeight<uls[j].offsetHeight){
                //             max=uls[j];
                //         }
                //     }
                //    box.style.height=max.offsetHeight+'px';
                //    console.log(box.offsetHeight);

            });
        }
    </script>
</body>

</html>